<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>详情页</title>
    <link href="../../../../ht-css/product/product.css" rel="stylesheet" type="text/css">
    <link href="../../../../ht-css/product/reset.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="../../../../lib/Hui-iconfont/1.0.8/iconfont.css"/>
</head>

<body ng-controller="skuDetailCtrl">
<div class="product_wrapper">
    <!--单品展示区 begin-->
    <div class="product_main clearfix">
        <!--左侧图片 begin-->
        <div class="pic_info">
            <!--大图  begin-->
            <div class="pic">
                <a href="#" class="img"><img id="largePic" alt="" src="{{skuItems[0].images[0].img_url}}"></a>
            </div>
            <!--大图  end-->
            <!--缩略图轮转 begin-->
            <div class="dp_slide"><!--a不可点击调disabled-->
                <a href="##" class="mainimg_fy prev disabled"></a>
                <a href="##" class="mainimg_fy next"></a>
                <div class="dp_slide_box" >
                    <ul>
                        <!--当前选中li调取curr-->
                        <li ng-repeat="item in skuItems[0].images" onclick="changeImg(this)"><img src="{{item.img_url}}"></li>
                    </ul>
                </div>
            </div>
            <!--缩略图轮转 end-->
            <div class="share_div clearfix"><!--收藏后调取class="btn_scsp btn_scsp_on"-->
                <a href="##"  class="btn_scsp btn_scsp_on"><i class="icon"></i>收藏商品</a>
            </div>
            </div>
        <!--左侧图片 end-->

        <div class="show_info">
            <!--中间内容 begin-->
            <div class="sale_box_left">
                <div class="name_info">
                    <h1>{{skuItems[0].sku_name}}</h1>
                    <h2>{{skuItems[0].subtitile}}</h2>
                </div>
                <div class="price_info">
                    <div class="g_price">
                        <span>价格：</span>
                        <span>{{skuItems[0].sale_price}}</span>
                        <span>{{skuItems[0].unit}}</span>
                    </div>
                </div>

                <div class="summary">
                    <div class="cuxiao_info clearfix">
                        <div class="dt">品牌：{{skuItems[0].brand_name}}</div>
                    </div>
                    <div class="cuxiao_info clearfix">
                        <div class="dt">商 品 库 存：{{skuItems[0].actual_stock}}</div>
                    </div>
                    <div class="cuxiao_info clearfix">
                        <div class="dt">最少起订量：{{skuItems[0].mini_order}}</div>
                    </div>
                    <div class="cuxiao_info clearfix">
                        <div class="dt">重量：{{skuItems[0].weight}}</div>
                    </div>
                    <div class="cuxiao_info clearfix">
                        <div class="dt">商 品 编 码：{{skuItems[0].sku_code}}</div>
                    </div>
                    <div class="cuxiao_info clearfix" ng-app="" ng-init="skuItems">别名：
                            <a ng-repeat="x in skuItems">
                                {{x.alias[0].alias_value}}
                            </a>
                    </div>
                </div>

                <div class="details">
                    <div class="g_color clearfix">
                        <span>颜&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;色：</span>
                        <div class="color clearfix"  ng-app="" ng-init="skuColor">
                            <ul>
                                <button ng-repeat="x in skuColor">
                                    {{x}}
                                </button>
                            </ul>
                         <!--   <button class="harvest">收起<i class="Hui-iconfont">&#xe6d6;</i></button>-->
                        </div>
                    </div>
                    <div class="g_standard clearfix">
                        <span>规&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：</span>
                        <div class="standard clearfix" ng-app="" ng-init="skuItems">
                           <!-- <button class="harvest" id="sizeOpen" style="float:right;margin:2px 20px 0 0" onclick="sizeShow()">展开<i class="Hui-iconfont">&#xe6d5;</i></button>
                            <button class="harvest hide" id="sizeClose" style="float:right;margin:2px 20px 0 0" onclick="sizeShow()">收起<i class="Hui-iconfont">&#xe6d6;</i></button>
-->
                            <ul>
                                <button ng-repeat="x in skuItems">
                                    {{ x.specifications }}
                                </button>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="choose_btns clearfix">
                    <div class="wrap_input"><input name="" type="text" value="1"><a href="##"
                                                                                      class="btn_reduce disabled">-</a><a
                            href="##" class="btn_add">+</a></div>
                    <div class="buy_box_btn"><a href="##" class="btn btn_red"><i class="Hui-iconfont">&#xe670;</i>加入采购单</a>
                    </div>
                    <div class="collect_box_btn"><a href="##" class="btn btn_red"><i
                            class="Hui-iconfont">&#xe649;</i><span>收藏</span></a></div>
                </div>

                <div class="pay_method clearfix">
                    <span>支付方式：</span>
                    <i class="icon icon_zfb"></i>
                    <span>支付宝转账</span>
                    <i class="icon icon_wx"></i>
                    <span>微信转账</span>
                    <i class="icon icon_yh"></i>
                    <span>银行转账</span>
                    <i class="icon icon_hd"></i>
                    <span>货到付款</span>
                </div>

            </div>
            <!--中间内容  end-->
            <!--更多服务 begin-->
            <div class="service_more">
                <h2>方盛云采承诺<i class="icon"></i></h2>
                <ul class="ensure">
                    <li class="clearfix"><i
                            class="icon icon01"></i><span>正品保障</span><span>一站购齐</span><span>工品集采</span><span>大厂直供</span>
                    </li>
                    <li class="clearfix"><i
                            class="icon icon02"></i><span>线上审批</span><span>便捷高效</span><span>个性定制</span><span>专业服务</span>
                    </li>
                    <li class="clearfix"><i
                            class="icon icon03"></i><span>价格透明</span><span>阳光采购</span><span>优质低价</span><span>正规发票</span>
                    </li>
                    <li class="clearfix"><i
                            class="icon icon04"></i><span>当天出库</span><span>24H配送</span><span>30天退换</span><span>售后无忧</span>
                    </li>
                </ul>
                <div class="title">温馨提示：</div>
                <ul class="hint">
                    <li>购买数量小于库存时，可当日出货；</li>
                    <li>购买数量大于库存时，请以预计出货日为准。</li>
                </ul>
            </div>
            <!--更多服务 end-->
        </div>

    </div>
    <!--单品展示区 end-->
    <!--多品列表 begin-->
    <div class="sku_more clearfix">
        <ul class="title clearfix">
            <li>商品编码</li>
            <li>规格</li>
            <li class="row02">重量（KG）</li>
            <li>价格</li>
            <li class="row03">采购数量</li>
            <li class="row02">库存</li>
            <li>预计出货日</li>
            <li>操作</li>
        </ul>
        <div class="list">
            <ul class="clearfix" ng-repeat="x in skuItems">
                <li>{{ x.sku_code}}</li>
                <li>{{ x.specifications }}</li>
                <li class="row02">{{ x.weight}}</li>
                <li>¥ {{ x.price }}</li>
                <li class="row03"><a href="##" class="disabled">-</a><span>1</span><a href="##">+</a></li>
                <li class="row02">{{ x.actual_stock}}</li>
                <li class="row02">一天</li>
                <li><a href="##" class="btn btn_red sku_more_btn"><i class="icon cart"></i>加入采购单</a></li>
            </ul>

        </div>
    </div>
    <!--多品列表 end-->

    <div class="product_content">
        <!-- 右侧主体 begin -->
        <div id="tab_topnav" class="product_right">
            <div class="tab tabBar">
                <span class="curr">商品介绍</span><span>技术参数</span><span>包装清单</span><span>售后保障</span>
            </div>
            <!--商品介绍-->
            <p ng-bind-html="spuDetail[0].detail" class="product_right_info tabCon">
            </p>
            <!--技术参数-->
            <div class="product_right_info tabCon">
                <table id="attrTable"  class="table table-border table-bordered table-bg mt-15 mb-30">
                    <thead>
                    <tr>
                        <th class="col-6-1 text-c">销售属性值</th>
                        <td>{{skuItems[0].sale_attri_value}}</td>
                    </tr>
                    <tr>
                        <th class="col-6-1 text-c">颜色</th>
                        <td>{{skuItems[0].color}}</td>
                    </tr>
                    <tr>
                        <th class="col-6-1 text-c">重量</th>
                        <td>{{skuItems[0].weight}}</td>
                    </tr>
                    <tr>
                        <th class="col-6-1 text-c">型号</th>
                        <td>{{skuItems[0].model}}</td>
                    </tr>
                    <tr>
                        <th class="col-6-1 text-c">规格</th>
                        <td>{{skuItems[0].specifications}}</td>
                    </tr>
                    </thead>
                </table>
            </div>
            <!--包装清单-->
            <div class="product_right_info tabCon">
                <div class="descrip">{{skuItems[0].pack_list}}</div>
            </div>
            <!--售后保障-->
            <div class="product_right_info tabCon">
                <div class="aftersale_box">
                    <div class="title"><i><img src="../../../../img/service.png"></i>正品保障</div>
                    <p>方盛云采所售商品均有质量保证，提供正规发票，请您放心选购。<router-link to="/helpCenter/invoiceSystem" target='_blank'>查看详情</router-link></p >
                    <p>注：因厂家可能在没有任何提前通知的情况下更改商品包装、产地或者一些附件，方盛云采不能确保客户收到的货物与商品介绍完全一致，只能承诺正品保障！若平台没有及时更新，敬请谅解！</p >
                    <div class="title"><i><img src="../../../../img/service.png"></i>维修服务</div>
                    <p>方盛云采所售商品自客户签收之日起提供维修服务，您可在线提交申请或直接凭销售票据至鑫方盛任意一家分公司申请维修。<router-link to="/helpCenter/repairOrChange" target='_blank'>查看详情</router-link></p >
                    <div class="title"><i><img src="../../../../img/service.png"></i>30天退货</div>
                    <p>方盛云采所售商品自客户签收之日起30日内（含），不影响二次销售可享受30天无忧退货服务（部分商品除外）。<router-link to="/helpCenter/afterSalePolicy" target='_blank'>查看详情</router-link></p >
                    <div class="title"><i><img src="../../../../img/service.png"></i>售后取件</div>
                    <p>方盛云采支持售后上门取件业务，详情请见“售后政策”。<router-link to="/helpCenter/afterSalePolicy" target='_blank'>查看详情</router-link></p >

                    <div class="title"><i><img src="../../../../img/service.png"></i>温馨提示</div>
                    <p>温馨提示：由于厂家不定期对商品的包装、附件、产地等进行更新，我司不能保证您收到的商品与图片信息相符，只能保证商品为支持认证，请您谅解。</p >
                </div>
            </div>
        </div>
        <!-- 右侧主体 end -->
        <!-- 左侧主体 begin -->
        <div class="product_left">
            <div class="recommend">
                <h3>商品推荐</h3>
                <ul>
                    <li>
                        <a href="#" class="pic"><img alt="" src="{{skuItems[0].images[0].img_url}}"></a>
                        <a href="##" class="name">{{skuItems[0].subtitile}}</a>
                        <span class="price">&yen;<b>{{skuItems[0].sale_price}}</b></span>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 左侧主体 end -->
    </div>
</div>
</body>
<script type="text/javascript" src="../../../../lib/jquery/1.9.1/jquery.min.js?rev=@@hash"></script>
<script src="../../../../lib/angular.min.js?rev=@@hash"></script>
<script src="https://cdn.bootcss.com/angular.js/1.5.0-beta.0/angular-sanitize.min.js?rev=@@hash"></script>
<script src="../../../../ht-js/public.js?rev=@@hash"></script>
<!--验证token-->
<script src="../../../../ht-js/verifyToken.js?rev=@@hash"></script>
<script src="../../../../ht-js/goods/product.js?rev=@@hash"></script>
<script>
    jQuery.product_right = function (tabBar, tabCon, class_name, tabEvent, i) {
        var $tab_menu = $(tabBar);
        // 初始化操作
        $tab_menu.removeClass(class_name);
        $(tabBar).eq(i).addClass(class_name);
        $(tabCon).hide();
        $(tabCon).eq(i).show();
        $tab_menu.bind(tabEvent, function () {
            $tab_menu.removeClass(class_name);
            $(this).addClass(class_name);
            var index = $tab_menu.index(this);
            $(tabCon).hide();
            $(tabCon).eq(index).show();
        });
    }

    $(function () {
        console.log(1)
        $.product_right("#tab_topnav .tabBar span", "#tab_topnav .tabCon", "curr", "click", "0")


    });

   function changeImg(imgEl){
        console.log(imgEl.childNodes[0]);
        $("#largePic")[0].src = imgEl.childNodes[0].src
    }

    var sizeflag=false;
    function sizeShow(){
        if(sizeflag){
            $('#sizeOpen').removeClass('hide')
            $('#sizeClose').addClass('hide')
            sizeflag=!sizeflag;
        }else{
            $('#sizeOpen').addClass('hide')
            $('#sizeClose').removeClass('hide')
            sizeflag=!sizeflag;

        }
    }

</script>
</html>